/**
 * panel - jQuery xui
 *
 * Licensed under the GPL:
 *   http://www.gnu.org/licenses/gpl.txt
 *
 * Copyright 2013 xjb [ beymy.en@gmail.com ]
 *
 */
(function($) {
    function setSize(target) {
        var state = $.data(target, 'panel');
        var opts = state.options;
        var panel = state.panel;
        var header = panel.find('>div.x-panel-header');
        var body = panel.find('>div.x-panel-body');

        panel.css({
            left: opts.left,
            top: opts.top
        });

        if (!isNaN(opts.width)) {
            panel._outerWidth(opts.width);
            header._outerWidth(panel.width());
            body._outerWidth(panel.width());
        } else {
            panel.width('auto');
            body.width('auto');
        }
        if (!isNaN(opts.height)) {
            panel._outerHeight(opts.height);
            body._outerHeight(panel.height() - header.outerHeight());
        } else {
            body.height('auto');
        }

        //opts.onResize.apply(target, [opts.width, opts.height]);
    }

    function movePanel(target, param) {
        var state = $.data(target, 'panel');
        var opts = state.options;
        var panel = state.panel;
        if (param) {
            if (param.left != null) opts.left = param.left;
            if (param.top != null) opts.top = param.top;
        }
        panel.css({
            left: opts.left,
            top: opts.top
        });
        opts.onMove.apply(target, [opts.left, opts.top]);
    }

    function wrapPanel(target) {
        var panel = $(target).addClass('x-panel-body').wrap('<div class="x-panel"></div>').parent();
        return panel;
    }

    function buildPanel(target) {
        var state = $.data(target, 'panel');
        var opts = state.options;
        var panel = state.panel;
        var body = panel.find('>div.x-panel-body');
        var header;
        //header
        if (opts.noheader) {
            body.addClass('x-panel-body-noheader');
        } else {
            header = $('<div class="x-panel-header"><div class="x-panel-title">' + (opts.title ? opts.title : '&nbsp;') + '</div></div>').prependTo(panel);
            if (opts.iconCls) {
                header.find('>div.x-panel-title').addClass('x-panel-with-icon').addClass(opts.iconCls);
            }
        }
        //body
        if (opts.content) {
            body.html(opts.content);
        }
        //border
        if (!opts.border) {
            header.addClass('x-panel-header-noborder');
            body.addClass('x-panel-body-noborder');
        }
        //size
        setSize(target);
        
        //collapsible
        if(opts.collapsible) {
            if(body.is(':hidden')) {
                header.addClass('x-panel-expand');
            } else {
                header.addClass('x-panel-collapse');
            }
            if(opts.collapsed) {
                collapsePanel(target, false);
            } else {
                expandPanel(target, false);
            }
            //event
            header.bind('click.panel', function() {
                if(body.is(':hidden')) {
                    expandPanel(target, true);
                } else {
                    collapsePanel(target, true);
                }
            });
        }
    }

    function collapsePanel(target, animate) {
        var state = $.data(target, 'panel');
        var opts = state.options;
        var panel = state.panel;
        var body = panel.find('>div.x-panel-body');
        var header = panel.find('>div.x-panel-header');

        if (!header.hasClass('x-panel-collapse')) return;

        body.stop(true, true); // stop animation
        //if (opts.onBeforeCollapse.call(target) == false) return;

        header.removeClass('x-panel-collapse').addClass('x-panel-expand');
        if (animate == true) {
            body.slideUp('normal', function() {
                opts.collapsed = true;
                //opts.onCollapse.call(target);
            });
        } else {
            body.hide();
            opts.collapsed = true;
            //opts.onCollapse.call(target);
        }
    }

    function expandPanel(target, animate) {
        var state = $.data(target, 'panel');
        var opts = state.options;
        var panel = state.panel;
        var body = panel.find('>div.x-panel-body');
        var header = panel.find('>div.x-panel-header');

        if (!header.hasClass('x-panel-expand')) return;

        body.stop(true, true); // stop animation
        //if (opts.onBeforeExpand.call(target) == false) return;

        header.removeClass('x-panel-expand').addClass('x-panel-collapse');
        if (animate == true) {
            body.slideDown('normal', function() {
                opts.collapsed = false;
                //opts.onExpand.call(target);
            });
        } else {
            body.show();
            opts.collapsed = false;
            //opts.onExpand.call(target);
        }
    }

    $.fn.panel = function(options, param) {
        if (typeof options == 'string') {
            return $.fn.panel.methods[options](this, param);
        }
        options = options || {};
        return this.each(function() {
            var state = $.data(this, 'panel');
            var opts;
            if (state) {
                opts = $.extend(state.options, options);
            } else {
                opts = $.extend({}, $.fn.panel.defaults, $.fn.panel.parseOptions(this), options);
                state = $.data(this, 'panel', {
                    options: opts,
                    panel: wrapPanel(this)
                });
            }
            buildPanel(this);
        });
    };

    $.fn.panel.methods = {
        options: function(jq) {
            return $.data(jq[0], 'panel').options;
        },
        panel: function(jq) {
            return $.data(jq[0], 'panel').panel;
        },
        header: function(jq) {
            return $.data(jq[0], 'panel').panel.find('>div.x-panel-header');
        },
        body: function(jq) {
            return $.data(jq[0], 'panel').panel.find('>div.x-panel-body');
        },
        move: function(jq, param) {
            return jq.each(function() {
                movePanel(this, param);
            });
        }
    };

    $.fn.panel.parseOptions = function(target) {
        return $.extend({}, $.parser.parseOptions(target, ['title','width','height','left','top']));
    };

    $.fn.panel.defaults = {
        title: null,
        iconCls: null,
        width: 'auto',
        height: 'auto',
        left: null,
        top: null,
        border: true,
        noheader: false,
        content: null,
        collapsible: false,
        collapsed: false
    };
})(jQuery);
